<!--接单列表详细列表-->
<template>
  <div class="gridContainer clearfix">
    <app-head :show="showstate" :title="pagetitle"></app-head>
    <div class="car-pc-title cf">
      <span class="f-l"><b><i class="llse llse-huoche"></i></b> {{ATVNo}}</i></span>
      <em class="org f-r ft12">待接单</em>
    </div>

    <scroller lock-x scrollbar-y use-pullup :height="scrollerHeight" @on-pullup-loading="getData" v-if="datas.length>0" :pullup-config="ScrollerConfig" ref="Scroller">
      <div class="acpt-list">

        <div class="acpt-list-wrap mb30" v-for="(item, index) in datas">
          <div class="acpt-list-head cf">
            <span class="txt f-l">业务单号：{{item.BBillNo}}</span>
          </div>
          <div class="displayflex acpt-list-body lineb">
            <span class="cargo">
              <i class="iconfont icon-cargo"></i>
              <p>{{item.Pkgs}}件</p>
            </span>
            <div class="txt flex1">
              <p class="ft17">{{item.PickContacts}} {{item.PickContactsTel}}</p>
              <p>取货地址：{{item.DepartureCity | city}}{{item.DepartureDistrict | district}}{{item.DepartureAddress}}</p>
              <p>送货地址：{{item.ArrivalCity | city}}{{item.ArrivalDistrict | district}}{{item.ArrivalAddress}}</p>
            </div>
          </div>
          <!-- <div class="btn-grp txt-rit">
            <div class="btn ml10" @click="viewOrderDetail(item.BBillGuid)">详情</div>
          </div> -->
        </div>

      </div>
      <div v-if="noMore" class="loader-over">没有更多记录了</div>
    </scroller>
    <div class="noDate_page" v-if="datas.length === 0">
      <div class="noDate_icon">
        <i class="iconfont icon-null"></i>
      </div>暂无数据，请通知所属公司派单！
    </div>
    <footer-menu :status='2'></footer-menu>
  </div>
</template>
<script>
import footerMenu from "@/components/core/footer/manage.footer.vue";
import appHead from '@/components/core/header/app_headbar.vue'
import { mapGetters, mapState } from "vuex";

export default {
  components:{
    footerMenu,
    appHead
  },
  data() {
    return {
      datas:[],

      totalRecords:0,
      noMore:false,
      PageIndex: 1,
      PageSize:4,
      ScrollerConfig: {
        content: "上拉加载",
        downContent: "上拉加载",
        height: 0,
        loadingContent: "加载中...",
        upContent: "上拉加载"
      }
    };
  },
  computed: {
    ATVNo(){
      return this.datas.length >0?this.datas[0].ATVNo:'';
    },
    ...mapState({
      pagetitle: state => state.cfg.appBarTitle,
      showstate: state => state.cfg.showAppBar,
    }),
    ...mapGetters({
      scrollerHeight: "cfg/getConHeight"
    }),
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null
    }
  },
  created(){
    this.getData();
  },
  mounted(){
    this.$store.dispatch("cfg/setConHeight");
  },
  methods: {
    getData() {
      var query = {
        Guid: this.$route.query.Guid,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      };
      this.Ajax.post("GetTaskorderDetail", query).then((resp) => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords; 
          if(resp.Datas && resp.Datas.length > 0){
            this.PageIndex++;
            this.datas = this.datas.concat(resp.Datas);
            this.ScrollControl();
          }
        } else {
          this.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });
    },

    viewOrderDetail(guid) {
      this.$router.push({
        path:'senddingdetailorder',
        query:{
          Guid: guid,
        }
      });
    },

    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.ScrollerConfig.content = '';
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if(this.datas.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.datas.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
}
</script>
